<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">人员管理</span>
  </div>
  <!-- 人员搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="员工名">
        <el-input placeholder="请输入员工名" v-model="searchData.username"></el-input>
      </el-form-item>
      <el-form-item label="角色类型" style="width: 170px">
        <el-select placeholder="请选择" v-model="searchData.role" @change="search">
          <el-option :label="item.label" :value="item.value" v-for="item in EmployeesType"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="research">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 人员详情表格 -->
  <el-card style="margin: 20px">
    <el-tag type="primary" size="large">组织人数:{{countEmployees.count}}</el-tag>
    <el-table :data="EmployeesDataArr">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="username" label="员工名" >
        <template #default="scope">
          <el-button link type="primary" size="small" @click="updateEmployees(scope.row.userId,scope.row.orgId)">{{ scope.row.username}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="mobile" label="联系方式"></el-table-column>
      <el-table-column align="center" prop="role" label="角色类型" :formatter="roleTypeFormatters"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link @click="updateEmployees(scope.row.userId,scope.row.orgId)">编辑</el-button>
          <el-button type="primary" size="small" link @click="deleteEmployees(scope.row.userId,scope.row.orgId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
<!-- 个人信息表格弹窗 -->
  <el-dialog title="员工信息" v-model="dialogVisible" :before-close="closeDialogVisible" style="width:1000px;padding:40px 40px 20px 40px;text-align: center">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="员工名" style="margin-bottom: 0"></el-form-item>
          <el-input v-model="EmployeesInfo.username"></el-input>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称" style="margin-bottom: 0"></el-form-item>
          <el-input v-model="EmployeesInfo.nickname"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="角色类型" style="margin-bottom: 0">
            <el-select placeholder="请选择角色类型" v-model="EmployeesInfo.role">
              <el-option label="行政" value="10"></el-option>
              <el-option label="财务" value="20"></el-option>
              <el-option label="法务" value="30"></el-option>
              <el-option label="人事" value="40"></el-option>
              <el-option label="IT" value="50"></el-option>
              <el-option label="其他" value="60"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" style="margin-bottom: 0"></el-form-item>
          <el-input v-model="EmployeesInfo.mobile"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="邮箱" style="margin-bottom: 0"></el-form-item>
          <el-input v-model="EmployeesInfo.email"></el-input>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" style="margin-bottom: 0">
            <el-radio-group v-model="EmployeesInfo.gender">
              <el-radio value="男" border>男</el-radio>
              <el-radio value="女" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="个人简介" style="margin-bottom: 0"></el-form-item>
          <el-input v-model="EmployeesInfo.profile"  type="textarea" resize="none" :rows="3"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 40px;">
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <el-form :inline="true">
            <el-form-item style="margin-left: 250px">
              <el-button @click="closeDialogVisible">取消</el-button>
              <el-button type="primary" @click="saveEmployees">确定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//定义一个全局的用户Id
const user = ref(getUser());
let userId = user.value.id;

//定义一个数组用于存储查询角色类型
const EmployeesType = ref([
  {label:'行政',value:'10'},
  {label:'财务',value:'20'},
  {label:'法务',value:'30'},
  {label:'人事',value:'40'},
  {label:'IT',value:'50'},
  {label:'其他',value:'60'}
])
//控制弹窗
const dialogVisible = ref(false);

//定义函数关闭弹窗
const closeDialogVisible = () => {
  if(confirm("您确定要关闭吗?")){
    dialogVisible.value = false;
    EmployeesInfo.value = {};
  }
}

//定义一个数组存储员工的信息
const EmployeesDataArr = ref([]);

//定义一个数组存储组织信息
const orgData = ref([]);

//定义一个对象用于存储搜索信息
const searchData = ref({
  username:'',
  role:'',
  orgId:''
});

//定义一个函数获取员工的信息
const search = () => {
  let level = '30';
  let data = qs.stringify({level:level, userId: userId});
  axios.get(BASE_URL+"/isms/role/select?"+data)
      .then((response) => {
        if (response.data.code == 200) {
          orgData.value = response.data.data[0];
          searchData.value.orgId = orgData.value.orgId;
          searchData.value.status = '20';
          let data = qs.stringify(searchData.value);
          axios.get(BASE_URL+"/isms/role/select?"+data)
              .then((response) => {
                if (response.data.code == 200) {
                  EmployeesDataArr.value = response.data.data;
                }else {
                  ElMessage.error(response.data.msg);
                }
              })
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

onMounted(() => {
  search();
  count();
})

//定义函数重置搜索信息
const research = () => {
  searchData.value = {};
  search();
}
//状态码格式转换
const roleTypeFormatters = (row,column,cellValue,index) => {
  if(cellValue==10){
    cellValue = "行政";
  }else if(cellValue==20){
    cellValue = "财务";
  }else if(cellValue==30){
    cellValue = "法务";
  }else if(cellValue==40){
    cellValue = "人事";
  }else if(cellValue==50){
    cellValue = "IT";
  }else if(cellValue==60){
    cellValue = "其它";
  }
  return cellValue;
}

//定义一个对象存储员工信息
const EmployeesInfo = ref({
  username:'',
  nickname:'',
  gender:'',
  mobile:'',
  email:'',
  profile:'',
  role:''
})

//定义函数编辑员工信息
const updateEmployees = (userId,orgId) => {
  dialogVisible.value = true;
  let data = qs.stringify({userId:userId, orgId: orgId});
  axios.get(BASE_URL+"/isms/role/select?"+data)
      .then((response) => {
        if (response.data.code == 200) {
          EmployeesInfo.value = response.data.data[0];
          console.log(EmployeesInfo.value);
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
//定义函数删除员工信息
const deleteEmployees = (userId,orgId) => {
  if (confirm("您确定要删除吗?")) {
    axios.post(BASE_URL+"/isms/role/delete/"+userId+"/"+orgId)
        .then((response) => {
          if (response.data.code == 200) {
            ElMessage.success("删除成功!");
            search();
            count();
          }else {
            ElMessage.error(response.data.msg);
          }
        });
  }
}

//定义函数保存修改的信息
const saveEmployees = () => {
  let data = qs.stringify(EmployeesInfo.value);
  axios.post(BASE_URL+"/isms/role/update",data)
      .then((response) => {
        if (response.data.code == 200) {
          ElMessage.success("修改成功!");
          EmployeesInfo.value = {};
          dialogVisible.value = false;
          search();
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

//定义变量获取组织人数
const countEmployees = ref({
  count:''
});

//定义函数获取人数
const count = () => {
  let data = qs.stringify({userId:userId, level: 30});
  axios.get(BASE_URL + "/isms/role/select?" + data)
      .then((response) => {
        if (response.data.code) {
          orgData.value = response.data.data[0];
          let orgId = orgData.value.orgId;
          let status = '30';
          axios.get(BASE_URL+"/isms/role/count/"+orgId+"/"+status)
              .then((response) => {
                if (response.data.code == 200) {
                  countEmployees.value.count = response.data.data;
                }else {
                  ElMessage.error(response.data.msg);
                }
              })
        }
      })
}
</script>

<style scoped>

</style>